<template>
  <t-card :bordered="false">
    <!-- 自定义搜索 -->
    <custom-search ref="customSearchRef" v-slot="{ params }" @submit="handleSeachTable">
      <t-col :span="3">
        <t-form-item label="楼盘名称" name="propertyName">
          <t-select v-model:value="params.propertyName" clearable filterable placeholder="">
            <t-option v-for="_ in propertyInfoList" :key="_.id" :value="_.id" :label="_.name">
              {{ _.name }}
              <span style="color: var(--td-text-color-secondary)">{{ _.address }}</span>
            </t-option>
          </t-select>
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="审批类型" name="type">
          <t-select
            v-model:value="params.type"
            :options="dictionaryStore.get('order_approval_type')"
            clearable
            filterable
            placeholder=""
          />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="审批状态" name="result">
          <t-select
            v-model:value="params.result"
            :options="dictionaryStore.get('bpm_task_status')"
            clearable
            filterable
            placeholder=""
          />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="创建时间" name="createTime">
          <t-date-range-picker
            allow-input
            v-model:value="params.createTime"
            clearable
            enable-time-picker
            placeholder=" "
            style="width: 100%"
          />
        </t-form-item>
      </t-col>
    </custom-search>
    <!-- 自定义表格 -->
    <custom-table
      ref="customTableRef"
      row-key="id"
      :columns="columns"
      :api="approveListCRUD.page"
      column-controller-key="approveList"
    >
 
      <template #engineeringStage="{ row }">
        {{ dictionaryStore.analysis('engineering_stage', row.engineeringStage) }}
      </template>
      <template #productStage="{ row }">
        {{ dictionaryStore.analysis('zheng_product_stage', row.productStage) }}
      </template>
      <template #customerLevel="{ row }">
        {{ dictionaryStore.analysis('decoration_order_customer_level', row.customerLevel) }}
      </template>
      <template #saleId="{ row }">
        {{ userStore.getUserNameById(row.saleId) }}
      </template>
      <template #designerId="{ row }">
        {{ userStore.getUserNameById(row.designerId) }}
      </template>
      <template #productDesignerId="{ row }">
        {{ userStore.getUserNameById(row.productDesignerId) }}
      </template>
      <template #engineeringManagerId="{ row }">
        {{ userStore.getUserNameById(row.engineeringManagerId) }}
      </template>
      <template #supervisionId="{ row }">
        {{ userStore.getUserNameById((row.supervisionId)) }}
      </template>
      <template #propertyName="{ row }">
        {{ propertyInfoList.find((item) => item.id === row.propertyName)?.name }}
        <span style="color: gray;">{{ row.address }}</span>
      </template>
      <template #type="{ row }">
        {{ dictionaryStore.analysis('order_approval_type', row.type) }}
      </template>
      <template #result="{ row }">
        {{ dictionaryStore.analysis('bpm_task_status', row.result) }}
      </template>
      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #operation="{ row }">
        <t-space break-line>
          <!-- 查看订单 -->
          <view-order :id="row.orderId" btn-text="处理审批" :approve-type="row.type" :is-product="row.type==16||row.type==17||row.type==18" :is-single-product="row.type==19||row.type==20||row.type==21" />
          <!-- 审批记录 -->
          <approve-record :process-instance-id="row.processInstanceId" />
        </t-space>
      </template>
    </custom-table>
  </t-card>
</template>

<script lang="ts">
export default {
  name: 'ApproveList',
};
</script>

<script setup lang="ts">
import dayjs from 'dayjs';
import { MessagePlugin, TableCol } from 'tdesign-vue-next';
import { onMounted, onUpdated, ref, useTemplateRef } from 'vue';

import { approveListCRUD } from '@/api/approve/list';
import { propertyManageCRUD } from '@/api/config/property';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import ViewOrder from '@/pages/order/details/components/ViewOrder.vue';
import { useDictionaryStore, useUserStore } from '@/store';
import disposableParams from '@/utils/disposableParams';

import ApproveRecord from '../components/approve-record.vue';

// 用户仓库
const userStore = useUserStore();
// 字典仓库
const dictionaryStore = useDictionaryStore();
// 楼盘信息列表
const propertyInfoList = ref([]);
// 处理获取楼盘信息列表
const handleGetPropertyInfoList = () => {
  const params = {
    pageSize: -1,
  };
  propertyManageCRUD
    .page(params)
    .then((data) => {
      propertyInfoList.value = data.list;
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
handleGetPropertyInfoList();
// 自定义搜索ref
const customSearchRef = useTemplateRef('customSearchRef');
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'engineeringStage', title: '施工阶段', width: 90 },
  { colKey: 'productStage', title: '产品阶段', width: 90 },
  { colKey: 'propertyName', title: '楼盘名称' },
  { colKey: 'customerName', title: '客户名称', width: 90 },
  { colKey: 'customerLevel', title: '客户等级', width: 80 },
  { colKey: 'saleId', title: '客服', width: 90 },
  { colKey: 'designerId', title: '设计师', width: 90 },
  { colKey: 'productDesignerId', title: '产品设计师', width: 90 },
  { colKey: 'engineeringManagerId', title: '工程部经理', width: 90 },
  { colKey: 'supervisionId', title: '监理', width: 80 },
  { colKey: 'lastMessage', title: '最后回访内容', ellipsis: true },
  { colKey: 'type', title: '审批类型' },
  { colKey: 'result', title: '审批状态' },
  { colKey: 'createTime', title: '创建时间', width: 160 },
  { colKey: 'operation', title: '操作', width: 160, fixed: 'right' },
];
const handleSeachTable=(params:any) =>{
  // if(params=='reset') {
    disposableParams.set('to-do-tree-jump-params', {
      type: '',
      orderIds: '',
    });
  // }
  handleInitTable()
}
// 处理初始化表格
const handleInitTable = () => {
  // 待办树跳转参数
  const toDoTreeJumpParams = disposableParams.get('to-do-tree-jump-params');
  const params = {
    type: toDoTreeJumpParams.oaType,
    orderIds: toDoTreeJumpParams.orderIds,
    ...customSearchRef.value.params,
  };
  customTableRef.value.initTable(params);
};
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
onMounted(() => {
  handleInitTable();
});
onUpdated(() => {
  handleRefreshTable()
})
</script>

<style lang="less" scoped></style>
